<form style="margin: 0 auto;">
    <div class="verticalSection verticalSection-extrabottompadding">
        <h2 class="sectionTitle">
            ${HeaderAudioSettings}
        </h2>

        <div class="selectContainer">
            <select is="emby-select" id="selectAllowedAudioChannels" label="${LabelAllowedAudioChannels}">
                <option value="-1">${Auto}</option>
                <option value="1">${LabelSelectMono}</option>
                <option value="2">${LabelSelectStereo}</option>
                <option value="6">5.1 ${LabelSelectAudioChannels}</option>
                <option value="8">7.1 ${LabelSelectAudioChannels}</option>
            </select>
        </div>

        <div class="selectContainer">
            <select is="emby-select" id="selectAudioLanguage" label="${LabelAudioLanguagePreference}"></select>
        </div>

        <label class="checkboxContainer">
            <input type="checkbox" is="emby-checkbox" class="chkPlayDefaultAudioTrack" />
            <span>${LabelPlayDefaultAudioTrack}</span>
        </label>

        <div class="checkboxContainer checkboxContainer-withDescription">
            <label>
                <input type="checkbox" is="emby-checkbox" class="chkDisableVbrAudioEncoding" />
                <span>${LabelDisableVbrAudioEncoding}</span>
            </label>
            <div class="fieldDescription checkboxFieldDescription">${DisableVbrAudioEncodingHelp}</div>
        </div>
    </div>

    <div class="qualitySections hide">
        <div class="verticalSection verticalSection-extrabottompadding videoQualitySection hide">
            <h2 class="sectionTitle">
                ${HeaderVideoQuality}
            </h2>

            <div class="selectContainer fldVideoInNetworkQuality hide">
                <select is="emby-select" class="selectVideoInNetworkQuality" label="${LabelHomeNetworkQuality}"></select>
            </div>

            <div class="selectContainer fldVideoInternetQuality hide">
                <select is="emby-select" class="selectVideoInternetQuality" label="${LabelInternetQuality}"></select>
            </div>

            <div class="selectContainer fldChromecastQuality hide">
                <select is="emby-select" class="selectChromecastVideoQuality" label="${LabelMaxChromecastBitrate}"></select>
            </div>

            <div class="selectContainer">
                <select is="emby-select" class="selectMaxVideoWidth" label="${LabelMaxVideoResolution}">
                    <option value="0">${Auto}</option>
                    <option value="-1">${ScreenResolution}</option>
                    <option value="640">360p</option>
                    <option value="852">480p</option>
                    <option value="1280">720p</option>
                    <option value="1920">1080p</option>
                    <option value="3840">4K</option>
                    <option value="7680">8K</option>
                </select>
            </div>

            <div class="checkboxContainer checkboxContainer-withDescription">
                <label>
                    <input type="checkbox" is="emby-checkbox" class="chkLimitSupportedVideoResolution" />
                    <span>${LimitSupportedVideoResolution}</span>
                </label>
                <div class="fieldDescription checkboxFieldDescription">${LimitSupportedVideoResolutionHelp}</div>
            </div>
        </div>

        <div class="verticalSection verticalSection-extrabottompadding musicQualitySection hide">
            <h2>
                ${HeaderMusicQuality}
            </h2>

            <div class="selectContainer">
                <select is="emby-select" class="selectMusicInternetQuality" label="${LabelInternetQuality}"></select>
            </div>
        </div>
    </div>

    <div class="verticalSection verticalSection-extrabottompadding">
        <h2 class="sectionTitle">
            ${TabAdvanced}
        </h2>

        <div class="checkboxContainer checkboxContainer-withDescription">
            <label>
                <input type="checkbox" is="emby-checkbox" class="chkPreferFmp4HlsContainer" />
                <span>${PreferFmp4HlsContainer}</span>
            </label>
            <div class="fieldDescription checkboxFieldDescription">${PreferFmp4HlsContainerHelp}</div>
        </div>

        <div class="checkboxContainer checkboxContainer-withDescription cinemaModeOptions">
            <label>
                <input type="checkbox" is="emby-checkbox" class="chkEnableCinemaMode" />
                <span>${EnableCinemaMode}</span>
            </label>
            <div class="fieldDescription checkboxFieldDescription">${CinemaModeConfigurationHelp}</div>
        </div>

        <div class="checkboxContainer fldEpisodeAutoPlay">
            <label>
                <input type="checkbox" is="emby-checkbox" class="chkEpisodeAutoPlay" />
                <span>${PlayNextEpisodeAutomatically}</span>
            </label>
        </div>

        <div class="checkboxContainer checkboxContainer-withDescription">
            <label>
                <input type="checkbox" is="emby-checkbox" class="chkRememberAudioSelections" />
                <span>${RememberAudioSelections}</span>
            </label>
            <div class="fieldDescription checkboxFieldDescription">${RememberAudioSelectionsHelp}</div>
        </div>

        <div class="checkboxContainer checkboxContainer-withDescription">
            <label>
                <input type="checkbox" is="emby-checkbox" class="chkRememberSubtitleSelections" />
                <span>${RememberSubtitleSelections}</span>
            </label>
            <div class="fieldDescription checkboxFieldDescription">${RememberSubtitleSelectionsHelp}</div>
        </div>

        <div class="checkboxContainer checkboxContainer-withDescription fldEnableNextVideoOverlay">
            <label>
                <input type="checkbox" is="emby-checkbox" class="chkEnableNextVideoOverlay" />
                <span>${EnableNextVideoInfoOverlay}</span>
            </label>
            <div class="fieldDescription checkboxFieldDescription">${EnableNextVideoInfoOverlayHelp}</div>
        </div>

        <div class="checkboxContainer fldExternalPlayer checkboxContainer-withDescription hide">
            <label>
                <input type="checkbox" is="emby-checkbox" class="chkExternalVideoPlayer" />
                <span>${EnableExternalVideoPlayers}</span>
            </label>
            <div class="fieldDescription checkboxFieldDescription">
                <div class="labelNativeExternalPlayers">${EnableExternalVideoPlayersHelp}</div>
            </div>
        </div>

        <div class="selectContainer">
            <select is="emby-select" class="selectChromecastVersion" label="${LabelChromecastVersion}"></select>
        </div>

        <div class="selectContainer">
            <select is="emby-select" class="selectSkipForwardLength" label="${LabelSkipForwardLength}"></select>
        </div>

        <div class="selectContainer">
            <select is="emby-select" class="selectSkipBackLength" label="${LabelSkipBackLength}"></select>
        </div>

        <h3 class="sectionTitle">${HeaderMediaSegmentActions}</h3>
        <div class="mediaSegmentActionContainer"></div>
    </div>

    <div class="verticalSection verticalSection-extrabottompadding">
        <h2 class="sectionTitle">
            ${HeaderVideoAdvanced}
        </h2>

        <div class="checkboxContainer checkboxContainer-withDescription fldEnableDts">
            <label>
                <input type="checkbox" is="emby-checkbox" class="chkEnableDts" />
                <span>${EnableDts}</span>
            </label>
            <div class="fieldDescription checkboxFieldDescription">${EnableDtsHelp}</div>
        </div>

        <div class="checkboxContainer checkboxContainer-withDescription fldEnableTrueHd">
            <label>
                <input type="checkbox" is="emby-checkbox" class="chkEnableTrueHd" />
                <span>${EnableTrueHd}</span>
            </label>
            <div class="fieldDescription checkboxFieldDescription">${EnableTrueHdHelp}</div>
        </div>

        <div class="checkboxContainer checkboxContainer-withDescription fldEnableHi10p hide">
             <label>
                 <input type="checkbox" is="emby-checkbox" class="chkEnableHi10p" />
                 <span>${EnableHi10p}</span>
             </label>
             <div class="fieldDescription checkboxFieldDescription">${EnableHi10pHelp}</div>
        </div>

        <div class="selectContainer">
            <select is="emby-select" id="selectPreferredTranscodeVideoCodec" label="${LabelSelectPreferredTranscodeVideoCodec}">
                <option value="">${Auto}</option>
                <option value="h264">H264</option>
                <option value="hevc">HEVC</option>
                <option value="av1">AV1</option>
            </select>
            <div class="fieldDescription">${SelectPreferredTranscodeVideoCodecHelp}</div>
        </div>

        <div class="selectContainer">
            <select is="emby-select" id="selectPreferredTranscodeVideoAudioCodec" label="${LabelSelectPreferredTranscodeVideoAudioCodec}">
                <option value="">${Auto}</option>
                <option value="aac">AAC</option>
                <option value="ac3">AC3</option>
                <option value="alac">ALAC</option>
                <option value="dts">DTS</option>
                <option value="flac">FLAC</option>
                <option value="opus">Opus</option>
            </select>
            <div class="fieldDescription">${SelectPreferredTranscodeVideoAudioCodecHelp}</div>
        </div>
    </div>

    <div class="verticalSection verticalSection-extrabottompadding">
        <h2 class="sectionTitle">
            ${HeaderAudioAdvanced}
        </h2>

        <div class="selectContainer">
            <select is="emby-select" id="selectAudioNormalization" label="${LabelSelectAudioNormalization}">
                <option value="Off">${Off}</option>
                <option value="TrackGain">${LabelTrackGain}</option>
                <option value="AlbumGain">${LabelAlbumGain}</option>
            </select>
            <div class="fieldDescription">${SelectAudioNormalizationHelp}</div>
        </div>

        <div class="checkboxContainer checkboxContainer-withDescription">
            <label>
                <input type="checkbox" is="emby-checkbox" class="chkAlwaysRemuxFlac" />
                <span>${LabelAlwaysRemuxFlacAudioFiles}</span>
            </label>
            <div class="fieldDescription checkboxFieldDescription">${AlwaysRemuxFlacAudioFilesHelp}</div>
        </div>

        <div class="checkboxContainer checkboxContainer-withDescription">
            <label>
                <input type="checkbox" is="emby-checkbox" class="chkAlwaysRemuxMp3" />
                <span>${LabelAlwaysRemuxMp3AudioFiles}</span>
            </label>
            <div class="fieldDescription checkboxFieldDescription">${AlwaysRemuxMp3AudioFilesHelp}</div>
        </div>
    </div>

    <button is="emby-button" type="submit" class="raised button-submit block btnSave hide">
        <span>${Save}</span>
    </button>
</form>
